<div class="pipeline-empty-container" ng-class="{'show': loaded}"
     ng-show="pipelines.length == 0">

  <div class="error-alert-div">
    <ng-include ng-if="common.errors" src="'app/home/alerts/error/errorModal.tpl.html'"></ng-include>
    <ng-include ng-if="common.errors" src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>
  </div>

  <div class="create-pipeline-btn-group" ng-if="!common.isSlaveNode">
    <h2 translate="home.getStarted">Get Started</h2>
    <button class="btn btn-primary pull-left create-pipeline-btn"
        ng-disabled="!isAuthorized([userRoles.admin, userRoles.creator]) || common.isSlaveNode"
        ng-click="addPipelineConfig()">
      <span class="fa fa-plus"></span>
      <span translate="home.createPipeline">Create Pipeline</span>
    </button>

    <button class="btn btn-primary pull-left import-pipeline-btn"
            ng-disabled="!isAuthorized([userRoles.admin, userRoles.creator]) || isSlaveNode"
            ng-click="importPipelineConfig()">
      <span class="fa fa-arrow-circle-down"></span>
      <span translate="home.importPipeline">Import Pipeline</span>
    </button>
  </div>
</div>


<div class="panel panel-default page-panel home-page" ng-show="pipelines.length > 0">

  <div class="panel-heading clearfix">
    <div class="panel-title size-toolbar">
      <h3 class="pull-left" translate="home.title">Pipelines</h3>

      <div class="pull-left">
        <a class="btn btn-link icon-button refresh-btn"
           tooltip-placement="bottom"
           tooltip="{{'global.form.refresh' | translate}}"
           tooltip-popup-delay="500"
           ng-click="refreshPipelines()">
          <span class="fa fa-refresh fa-14x"></span>
        </a>
      </div>

      <div class="pull-right" ng-show="pipelines.length > 1">

        <span class="sort-by-label">Sort by:</span>
        <div class="btn-group pull-right sort-by-dropdown">

          <button class="btn btn-link dropdown-toggle icon-button" type="button" data-toggle="dropdown">
            <span>{{'home.sortColumn.' + sortColumn | translate}}</span>
            <i ng-show="!sortReverse" class="fa fa-arrow-down"></i>
            <i ng-show="sortReverse" class="fa fa-arrow-up"></i>
          </button>

          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#"
                 ng-click="sortColumn = 'name'; sortReverse = false">
                <span translate="home.sortColumn.name">Name</span>
                <i class="fa fa-arrow-down"></i>
              </a>
            </li>

            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#"
                 ng-click="sortColumn = 'name'; sortReverse = true">
                <span translate="home.sortColumn.name">Name</span>
                <i class="fa fa-arrow-up"></i>
              </a>
            </li>



            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#"
                 ng-click="sortColumn = 'created'; sortReverse = false">
                <span translate="home.sortColumn.created">Date created</span>
                <i class="fa fa-arrow-down"></i>
              </a>
            </li>

            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#"
                 ng-click="sortColumn = 'created'; sortReverse = true">
                <span translate="home.sortColumn.created">Date created</span>
                <i class="fa fa-arrow-up"></i>
              </a>
            </li>

            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#"
                 ng-click="sortColumn = 'lastModified'; sortReverse = false">
                <span translate="home.sortColumn.lastModified">Date updated</span>
                <i class="fa fa-arrow-down"></i>
              </a>
            </li>

            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#"
                 ng-click="sortColumn = 'lastModified'; sortReverse = true">
                <span translate="home.sortColumn.lastModified">Date updated</span>
                <i class="fa fa-arrow-up"></i>
              </a>
            </li>


          </ul>
        </div>
      </div>

    </div>
  </div>

  <div class="panel-body"  ng-style="{'height': (windowHeight - 60) + 'px', 'width': (windowWidth) + 'px'}" resize>
    <ng-include src="'app/home/alerts/error/errorModal.tpl.html'"></ng-include>
    <ng-include src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>

    <section class="tile-list ">

      <section class="pipeline-container new-pipeline" ng-if="!common.isSlaveNode && isAuthorized([userRoles.admin, userRoles.creator])">
        <div class="centering-container">
          <a href="" class="btn btn-primary create-pipeline-btn-link" ng-click="addPipelineConfig()">
            <span class="fa fa-plus"></span>
            <span translate="home.createPipeline">Create new pipeline</span></a>
          <br>
          <a href="" class="btn btn-link import-pipeline-btn-link" ng-click="importPipelineConfig()">
            <span class="fa fa-arrow-circle-down"></span>
            <span translate="home.importPipeline">Import pipeline</span>
          </a>
        </div>
      </section>

      <section class="pipeline-container single-pipeline"
               ng-repeat="pipeline in pipelines | orderBy:sortColumn:sortReverse"
               ng-click="openPipeline(pipeline)">
        <header>
          <h2>{{pipeline.name | limitTo: 50}}</h2>
        </header>

        <section class="project-additional-info"
                 ng-hide="common.pipelineStatusMap[pipeline.name].status === 'RUNNING'">
          <span class="time-update" translate="home.updated">Updated</span>
          <span class="time-update" am-time-ago="pipeline.lastModified"></span>
          <span class="time-update" translate="home.ago">ago</span>
        </section>

        <section class="project-additional-info"
                 ng-show="common.pipelineStatusMap[pipeline.name].status === 'RUNNING'">
          <span class="time-update" translate="home.header.uptime">Uptime</span>
          <span class="time-update" am-time-ago="common.pipelineStatusMap[pipeline.name].timeStamp"></span>
        </section>

        <footer >
          <section class="running-status"
                   ng-if="common.pipelineStatusMap[pipeline.name].status === 'RUNNING'"
                   tooltip-placement="bottom"
                   tooltip="{{'home.runningStatus' | translate}}">
            <i class="fa fa-spinner fa-spin fa-14x"></i>
          </section>

          <section class="invalid-status"
                   ng-if="!pipeline.valid"
                   tooltip-placement="bottom"
                   tooltip="{{'home.invalidStatus' | translate}}">
            <i class="fa fa-exclamation-triangle fa-12x"></i>
          </section>

          <section class="invalid-status"
                   ng-if="common.pipelineStatusMap[pipeline.name].status == 'START_ERROR' || common.pipelineStatusMap[pipeline.name].status == 'RUNNING_ERROR' || common.pipelineStatusMap[pipeline.name].status == 'RUN_ERROR' || common.pipelineStatusMap[pipeline.name].status == 'CONNECT_ERROR'"
                   tooltip-placement="bottom"
                   tooltip="{{'Pipeline Status :' + common.pipelineStatusMap[pipeline.name].status + ': ' + common.pipelineStatusMap[pipeline.name].message}}">
            <i class="fa fa-exclamation-triangle fa-12x"></i>
          </section>

          <section class="triggered-alert-status"
                   ng-if="common.pipelineStatusMap[pipeline.name].status === 'RUNNING' &&
                   common.alertsMap[pipeline.name] && common.alertsMap[pipeline.name].length > 0"
                   tooltip-placement="bottom"
                   tooltip-html="getPipelineAlerts(common.alertsMap[pipeline.name])">
            <i class="fa fa-bell fa-12x"></i>
            <span ng-bind="common.alertsMap[pipeline.name].length"></span>
          </section>

          <section class="pipeline-menu" ng-if="!common.isSlaveNode && isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
            <span class="split-bar"></span>
            <div class="action-menu" dropdown>
              <span class="dropdown-toggle" dropdown-toggle
                    ng-click="$event.stopPropagation();">
                <i class="fa fa-ellipsis-h"></i>
              </span>
              <ul class="dropdown-menu" role="menu">
                <li role="presentation"
                    ng-if="isAuthorized([userRoles.admin, userRoles.creator])"
                    ng-hide="common.pipelineStatusMap[pipeline.name].status === 'RUNNING'">
                  <a href="#" dropdown-toggle ng-click="deletePipelineConfig(pipeline, $event)">
                    <i class="fa fa-trash-o"></i>
                    <span>{{'global.form.delete' | translate}}</span>
                  </a>
                </li>

                <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator])">
                  <a href="#" dropdown-toggle ng-click="duplicatePipelineConfig(pipeline, $event)">
                    <i class="fa fa-files-o"></i>
                    <span>{{'global.form.duplicate' | translate}}</span>
                  </a>
                </li>

                <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator])">
                  <a href="#" dropdown-toggle ng-click="importPipelineConfig(pipeline, $event)">
                    <i class="glyphicon glyphicon-import"></i>
                    <span>{{'global.form.import' | translate}}</span>
                  </a>
                </li>

                <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
                  <a href="#" dropdown-toggle ng-click="exportPipelineConfig(pipeline, $event)">
                    <i class="glyphicon glyphicon-export"></i>
                    <span>{{'global.form.export' | translate}}</span>
                  </a>
                </li>

                <li ng-repeat-end role="presentation" class="divider"
                    ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
                    ng-show="pipeline.valid"></li>

                <li role="presentation"
                    ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
                    ng-hide="common.pipelineStatusMap[pipeline.name].status === 'RUNNING' || !pipeline.valid">
                  <a href="#" dropdown-toggle ng-click="startPipeline(pipeline, $event)">
                    <i class="glyphicon glyphicon-play"></i>
                    <span>{{'home.header.start' | translate}}</span>
                  </a>
                </li>

                <li role="presentation"
                    ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
                    ng-show="common.pipelineStatusMap[pipeline.name].status === 'RUNNING'">
                  <a href="#" dropdown-toggle ng-click="stopPipeline(pipeline, $event)">
                    <i class="glyphicon glyphicon-stop"></i>
                    <span>{{'home.header.stop' | translate}}</span>
                  </a>
                </li>

              </ul>
            </div>

          </section>

        </footer>
      </section>

    </section>


  </div>

</div>
